<template>
	<view>
		<view class="con">
			<view class="box">
				<view class="">
					<view class="box__title">
						商品带货实名认证
					</view>
					<view class="box__tip">
						隐私信息严格加密，全程保密，绝不公开 ！
					</view>
				</view>
				<image src="/static/personal/rz.png" class="box__i" mode=""></image>
			</view>
			<view class="b">
				<view class="b__item">
					<view class="b__item__label">
						姓名
					</view>
					<input type="text" placeholder="姓名" v-model="form.name" class="b__item__inp" />
				</view>
				<view class="b__item">
					<view class="b__item__label">
						证件号码
					</view>
					<input type="text" placeholder="证件号码" v-model="form.card" class="b__item__inp" />
				</view>
				<view class="b__title">
					身份证照片
				</view>
				<view class="u-flex u-flex-y-center u-flex-between">
					<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
						:maxCount="1" width="302rpx" height="212rpx">
						<image src="/static/personal/zm.png" mode="widthFix"
							style="width: 302rpx;height: 212rpx;border-radius: 10rpx;"></image>
					</u-upload>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1" width="302rpx" height="212rpx">
						<image src="/static/personal/fm.png" mode="widthFix"
							style="width: 302rpx;height: 212rpx;border-radius: 10rpx;"></image>
					</u-upload>
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button text="上传" color="#e3432d" shape='circle' size="large"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '张节',
					card: '450202199107250311'
				},
				fileList6:[],
				fileList1:[],
			};
		}
	}
</script>

<style lang="scss">
	.con {
		padding: 30rpx;

		.box {
			padding: 0 27rpx;
			height: 178rpx;
			background: #E3432D;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&__title {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 36rpx;
			}

			&__tip {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 24rpx;
				margin-top: 34rpx;
			}

			&__i {
				width: 135rpx;
				height: 133rpx;
			}
		}
	}

	.b {
		margin-top: 27rpx;
		padding: 43rpx 30rpx 62rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 30rpx 30rpx;

		&__item {
			width: 611rpx;
			height: 94rpx;
			background: #F7F8FA;
			border-radius: 47rpx 47rpx 47rpx 47rpx;
			margin-left: 10rpx;
			display: flex;
			align-items: center;
			margin-bottom: 39rpx;

			&__label {
				width: 116rpx;
				padding: 0 38rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #5C5C5C;
				line-height: 36rpx;
			}

			&__inp {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #0B0B0B;
				line-height: 36rpx;
				flex: 1;
			}
		}

		&__title {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #888888;
			line-height: 24rpx;
			margin: 20rpx 0 34rpx;
		}

	}
	.footer{
		padding: 60rpx;
		width: 630rpx;
		position: fixed;
		bottom: 20rpx;
		left: 0;
	}
</style>